<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{ width: 200px; height: 200px; line-height: 200px; text-align: center; background: red;}
        .box1{ width: 100px; height: 100px; line-height: 100px; text-align: center;}
    </style>
    <script>
    window.onload = function(){
        // var oBox = document.getElementById('div1');
        var oBox1 = document.getElementsByClassName('box');

        oBox1.onmouseover=function(){
            oBox1.className = 'box box1';
        }
        
    }
    </script>
</head>
<body>
    <div class="box" id="div1">
        测试
    </div>
</body>
</html>